import React, { Component } from 'react'
import { Modal, message } from 'antd'
import QueryList from '@/components/basicWidget/QueryList'
import InputWidget from '@/components/basicWidget/InputWidget';
import Button, { TableButton } from '@/components/basicWidget/Button';
import formValidate from '@/service/validate/formValidate';
import { post, _delete } from '@/utils/requestUtil.js'
import ParamCard from '@/components/viewWidget/ParamCard';

const {confirm} = Modal

class ParamManage extends Component {

    constructor(props) {
        super(props)
        this.state = {
            addModalProps: {
                modalVisual: false
            },
            editModalProps: {
                modalVisual: false
            },
            paramCode: '',
            paramName: '',
            editParamCode: null,
            addModalKey: new Date().getTime() + '',
            editModalKey: new Date().getTime() + ''
        }
    }

    async componentDidMount() {

    }

    actionColumns = (columns, data) => {
        columns.push({ title: '操作', dataIndex: 'operate' })
        data = data.map(item => {
            item.operate = (
                <TableButton onClick={this.editModalOpen(item.code)}>修改</TableButton>
            )
            return item
        })
        return { newColumns: columns, newData: data }
    }

    onDelete = async () => {
        const {selectedRows} = this.queryList.state
        if (selectedRows.length === 0) {
            message.warning('请选择要删除的数据')
            return
        }
        confirm({
            content: `确定要删除这条参数吗`,
            onOk: async () => {
                const response = await _delete(`/api/param/delete/${selectedRows[0].code}`)
                if (response && response.data === true) {
                    message.success('删除成功')
                    await this.queryList.onQuery()
                }
            },
            onCancel: () => {return}
        })
    }

    addModalOpen = async () => {
        await new Promise(resolve => {
            this.setState(preState => {
                return {
                    addModalProps: {
                        ...preState.addModalProps,
                        modalVisual: true,
                    },
                    addModalKey: new Date().getTime() + '',
                    paramCode: '',
                    paramName: ''
                }
            }, resolve)
        })
    }

    addModalCancel = async () => {
        await new Promise(resolve => {
            this.setState(preState => {
                return {
                    addModalProps: {
                        ...preState.addModalProps,
                        modalVisual: false
                    }
                }
            }, resolve)
        })
    }

    editModalOpen = (paramCode) => {
        return async () => {
            await new Promise(resolve => {
                this.setState(preState => {
                    return {
                        editModalProps: {
                            ...preState.editModalProps,
                            modalVisual: true,
                        },
                        editModalKey: new Date().getTime() + '',
                        editParamCode: paramCode
                    }
                }, resolve)
            })
        }
    }

    editModalCancel = async () => {
        await new Promise(resolve => {
            this.setState(preState => {
                return {
                    editModalProps: {
                        ...preState.editModalProps,
                        modalVisual: false
                    }
                }
            }, resolve)
        })
    }

    //输入框变化获取值(通过value)
    onChange = (inputName) => {
        return async (value) => {
            await new Promise((resolve) => {
                this.setState({ [inputName]: value }, resolve)
            })
        }
    }

    renderAddModal = () => {
        return (
            <Modal
                title='新增参数项'
                open={this.state.addModalProps.modalVisual}
                onCancel={this.addModalCancel}
                footer={null}
            >
                <div
                    key={this.state.addModalKey}
                    style={{ margin: '1em', display: 'flex', flexDirection: 'column' }}>
                    <InputWidget
                        style={{ marginBottom: '1em' }}
                        prefixName={{ content: '参数标识' }}
                        value={this.state.paramCode}
                        onChange={this.onChange('paramCode')}
                        rules={
                            [
                                {
                                    validate: formValidate.getValidater('isMust'),
                                    failMessage: '参数标识不能为空'
                                }
                            ]
                        }
                        ref={ref => { this.paramCodeInput = ref }}
                    >
                    </InputWidget>
                    <InputWidget
                        style={{ marginBottom: '1em' }}
                        prefixName={{ content: '参数名称' }}
                        value={this.state.paramName}
                        onChange={this.onChange('paramName')}
                        rules={
                            [
                                {
                                    validate: formValidate.getValidater('isMust'),
                                    failMessage: '参数名称不能为空'
                                }
                            ]
                        }
                        ref={ref => { this.paramNameInput = ref }}
                    >
                    </InputWidget>
                    <Button
                        onClick={async () => {
                            const { paramNameInput, paramCodeInput } = this
                            let refArray = [paramNameInput, paramCodeInput]
                            const validateResult = await formValidate.validateForm(refArray)
                            if (validateResult === false) return false
                            const { paramCode, paramName } = this.state
                            const response = await post('/api/param/add', { body: JSON.stringify({ code: paramCode, name: paramName }) })
                            if (response) {
                                if (response.data === true) {
                                    message.success('新增参数成功')
                                    await this.addModalCancel()
                                    await this.queryList.onQuery()
                                } else {
                                    message.warning(response.message)
                                }
                            }
                        }}
                    >保存</Button>
                </div>
            </Modal>
        )
    }

    renderEditModal = () => {
        return (
            <Modal
                title='参数项维护'
                open={this.state.editModalProps.modalVisual}
                onCancel={this.editModalCancel}
                footer={null}
                width={'80%'}
            >
                <ParamCard
                    key={this.state.editModalKey}
                    code={this.state.editParamCode}
                ></ParamCard>
            </Modal>
        )
    }

    render() {
        return (
            <>
                <QueryList
                    queryCode='paramManage'
                    actionColumns={this.actionColumns}
                    addModalOpen={this.addModalOpen}
                    onDelete={this.onDelete}
                    ref={queryList => this.queryList = queryList}
                >
                </QueryList>
                {this.renderAddModal()}
                {this.renderEditModal()}
            </>
        )
    }
}

export default ParamManage
